<template>
    <h1>APP 组件</h1>

    <h4>num: {{ num }}</h4>
    <button @click="setNum">修改 num</button>

    <h4>info.name {{ info.name }}</h4>
    <button @click="setInfoName">改名</button>


    <hr>


    <h4>商品名: {{ obj.title }}</h4>
    <button @click="setTitle">修改商品名</button>

    <h4>商品价格: {{ obj.info.price }}</h4>
    <button @click="setPrice">修改商品价格</button>
</template>

<script setup>
import { shallowRef, shallowReactive } from 'vue'

/**
 *  shallowRef, shallowReactive
 *
 *      能够帮助我们创建一个响应式数据, 但是只有第一层数据有响应式, 深层数据没有响应式
 *
 *      除此之外, 用法上和 ref/reactive 完全相同
*/

const num = shallowRef(100)
function setNum () {
    num.value++
}

const info = shallowRef({
    id: 'qf001',
    name: '张三'
})
function setInfoName () {
    info.value.name = '李四'
    console.log('info.value.name: ', info.value.name)
}





const obj = shallowReactive({
    title: '苹果',
    info: {
        id: 'XF001',
        price: 100
    }
})

function setTitle () {
    obj.title = '香蕉'
}

function setPrice () {
    obj.info.price = 200

    console.log('obj.info.price', obj.info.price)
}

</script>
